<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Check-in System</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
		<script type="text/javascript" src="../js/plugins/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.cookie.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.uniform.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.validate.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.tagsinput.min.js"></script>
		<script type="text/javascript" src="../js/plugins/charCount.js"></script>
		<script type="text/javascript" src="../js/plugins/ui.spinner.min.js"></script>
		<script type="text/javascript" src="../js/plugins/chosen.jquery.min.js"></script>
		<script type="text/javascript" src="../js/custom/general.js"></script>
		<script type="text/javascript" src="../js/custom/forms.js"></script>
		<script>
			function clock() {
				// var t = new Date().toLocaleTimeString();
				var t = new Date();
				document.getElementById("clock").innerText = t;
			}
			var int = self.setInterval("clock()", 1000);
		</script>
		
		<script>
			var mylabid = '<%=request.getParameter("labid") %>';//M304
			jQuery(function(){
				jQuery("#goci").click(function(){
					if(jQuery(".nowinfo").val()=='   '){
						alert("你需要选择签到理由！");
						return;
					}
					jQuery.ajax({
						url:"../CiciServlet",
						type:"POST",
						data:{
							'userid':jQuery("#userid").val(),
							'labid':mylabid,
							'info':jQuery(".nowinfo").val()
						},
						success:function(message){
							console.log(message);
							eval("message="+message);
							if(message['state'] == 1){
								alert("成功");
							}
							else{
								alert("出现问题！\n如果此弹框持续出现，请联系管理员或开发人员");
							}
						}
					});
				});
			});
		</script>
	</head>

	<body>
		<div class="bodywrapper">
			<div class="topheader orangeborderbottom5">
				<div class="left">
					<div style="margin: 0 auto; text-align: center; width: 100%;">
						<h1 class="logo">Heze University <span>Laboratory of Innovation </span></h1>
					</div>
					
					

				
					<br clear="all" />
					<div class="contentwrapper padding10" style="height: 800px;" >
						<div class="errorwrapper error403" style="text-align: center;">
							<div class="errorcontent">
								<br>
								<br>
								<h1 style="font-size:40px;">实验室签到页</h1>
								<br>
								<h3>当前实验室</h3>
								<br>
								<h3 style="font-size: 40px;"><%=request.getParameter("labname") %></h3>
								<br>
								<br>
								<h3>你的学号</h3>
								<br>
								<input type="text" id="userid" value="" style="font-size: 30px; text-align: center; width: 80%;"/>
								<br>
								<br>
								<span id="youare">
									
								</span>
								<h3>签到理由</h3>
								<br>
								<select  id="info" class="nowinfo" style="font-size: 23px; width: 80%;height: 45px;">
								<!-- 
									<option class='varselect' value="学习web">学习 Web</option>
									<option class='varselect' value="制作项目">制作项目</option>
									<option class='varselect' value="学习web">修改 bug</option>
									<option class='varselect' value="0">其他...</option> 
								-->
								</select>
								<input type="text" id="infohide" placeholder="请输入实验内容" style="font-size: 30px; text-align: center; width: 80%;" class="nowinfo">
								<script type="text/javascript">
									
									function context_box_check (){
										if(jQuery("#info").val() == '其他'){
											jQuery('#infohide').show();
											
											jQuery('#infohide').attr('class', 'nowinfo');
											jQuery('#info').attr('class', '')
										}
										else{
											jQuery('#infohide').hide();
											
											jQuery('#infohide').attr('class', '');
											jQuery('#info').attr('class', 'nowinfo')
										}
									}
									
									jQuery('#info').change(context_box_check);
									jQuery('#infohide').hide();
									
									
								
									//此函数可向选项列表添加一个选项
									function addSelect(text){
										jQuery("#info").append("<option class='varselect' value='"+text+"'>"+text+"</option>");
									}
								
									//加载选项 
									function loadSelect(){
										//删除之前存在的选项
										var $varselect = jQuery(".varselect");
										for(var i = 0; i < $varselect.length; i++){
											$varselect[i].remove();
										}
										var d = new Date();
										//请求选项并添加
										jQuery.ajax({
											
											/////////////////////////////////////////////jsp///////////
											// url:'../CitextServlet',
											url:'../CitextServlet',
											type:"POST",
											data:{
												'mode':41,
												/////////////////////////////////////////////jsp///////////
												'labid':mylabid,
												'd':d.getTime()
											},
											success:function(message){
												console.log(message);
												addSelect('   ');//3个空格
												eval("message = " + message);
												for(var i = 0; i < message.length; i++){
													addSelect(message[i]['text']);
												}
												addSelect('其他');
											},
											error:function(message){
												alert('服务器访问异常\n'+message);
											}
										});
									}
									jQuery(function(){
										loadSelect();
										context_box_check();
										jQuery("#info").val();
									});
								</script>
								<br>
								<br>
								<br>
								<br>
								<button type="button" id="goci" style="width: 80%;font-size: 20px;">签到</button>
								<br/>
								<br/>
								<button type="button" id="goci2" style="width: 80%;font-size: 20px;" onclick="javaScript:jQuery('#goci').click();">签退</button>
								<br><br>
								<b>现在时间:</b>
								<span id="clock">
									
								</span>
							</div>
							
							
							<!--errorcontent-->
						</div>
				</div>
				<!--left-->

				<div class="right">
					
						<!--userdata-->
					</div>
					<!--userinfodrop-->
				</div>
				<!--right-->
			</div>
			<!--topheader-->


			
				<!--errorwrapper-->
			</div>


		
		<!--bodywrapper-->

	</body>
</html>
